import React, { Component } from 'react'
import { Button, Card, Table, Space, Modal, message, Radio, Divider } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Panel } from '../../../components'
import ModalForm from "./ModalForm";
import api from '../../../api';
import '../../index.css'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom';
import router from '../../../router';


const columns = [
  {
    title: '工号',
    dataIndex: 'workId'
  },
  {
    title: '名字',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },

  {
    title: '部门',
    dataIndex: 'apartment'
  },
  {
    title: '电话',
    dataIndex: 'phone'
  },
  {
    title: '地区',
    dataIndex: 'area',
  },
];

// for (let i = 0; i < 46; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   });
// }


class User extends Component {

  constructor(props) {
    super(props)
    this.state = {
      dataSource: [],
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      flag: false, // 初始为false
      visible: false,
      data: [],
    }
  }

  componentDidMount() {
    this.getData();
  }

  // 点击后改为true 渲染D组件
  fun = () => {
    this.setState({
      flag: true,
      visible: true
    }, () => {
      console.log('APP state flag ', this.state.flag)
    }) // 回调函数
  }

  AA = () => {

    alert("确定要修改吗？")
  }

  getData = () => {
    const arr = []
    // debugger
    api.getBanner("/cpmanage", null)
      .then(data => {
        debugger
        for (let i = 0; i < data.data.data.length; i++) {
          arr.push({
            workId: data.data.data[i].workId,
            name: data.data.data[i].name,
            age: data.data.data[i].age,
            apartment: data.data.data[i].apartment,
            phone: data.data.data[i].phone,
            area: data.data.data[i].area

          })
          // arr.push({
          //   key: i,
          //   name: data.data.data[i].name,
          //   age: 32,
          //   address: `London, Park Lane no. ${i}`,
          // });
        }
        console.log(arr)
        // this.setState({data:[{name:'友空间'}]})
        // return arr;
        this.setState({ data: arr })
      })

  }

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = (selectedRowKeys) => {
    debugger
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  setParvisible = () => {
    debugger;
    this.setState({
      visible: false,
      flag: false
    })
  }

  link = () =>{
    router.push({
      pathname:'/setting/edit',
      state:{"name":'liuxiaoh'}
    })
  }

  onLink = () =>{
      this.props.history.push('/setting/edit')
  }

  // rowSelecttion =( )=> {
  //   // this.state.selectedRowKeys
  //   this.onSelectChange(this.state.selectedRowKeys)
  // }


  render() {
    const { loading, selectedRowKeys } = this.state;
    const hasSelected = selectedRowKeys.length > 0;
    return (
      //   <Panel title='菜单管理'>
      //   <div className="m-operate">
      //     <Button type="primary" icon={<PlusOutlined />}
      //       onClick={this.onAdd()}>新增
      //       </Button>
      //   </div>
      //   <Card>
      //     {/* 列表组件 */}
      //     <Table {...this.getTableProps()} />
      //   </Card>
      //   {/* {modalForm && <ModalForm {...modalForm} {...this.props} />} */}
      // </Panel>
      <div>
        <div style={{ float: 'right', marginBottom: 16 }}>
          <Button onClick={this.fun} disabled={!hasSelected} loading={loading} >修改
          </Button>
          <Button type="primary"
            // onClick={this.start} 
            disabled={!hasSelected} loading={loading}
          >
            Reload
          </Button>
          <Button onClick={this.link}>跳转</Button>
          <Link to={{pathname:'/setting/edit', query:{"name":"name"}}}>查看</Link>
          {/* <Button onClick= {this.onLink} disabled={!hasSelected} loading={loading}>编辑 */}
            {/* <Link to={{pathname:'/setting/edit',state: {name: 'dx'}}}  style={{ color: 'black' }} >
              编辑
            </Link> */}
          {/* </Button> */}
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys} items` : ''}
          </span>
        </div>

        <Table id='roleTable'
          rowKey={record => record.workId}
          rowSelection={{
            selectedRowKeys,
            onChange: this.onSelectChange,
          }}
          pagination={{
            position: ['bottomCenter'],
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => {
              return (
                <span
                  style={{
                    fontSize: 16,
                    color: '#264653',
                    fontFamily: "微软雅黑",
                  }}
                >共{total}条数据</span>
              )
            }
          }}
          columns={columns} dataSource={this.state.data}
        />
        {
          this.state.flag && <ModalForm setParvisible={this.setParvisible} visible={true} AA={this.AA} data={this.state.data[this.state.selectedRowKeys[0] - 1]} />
        }
      </div>
    )

  }
}

export default User